<template>
  <div class="views-container">
    <div id="echart1"></div>
  </div>

</template>

<script>
import { statisticsGoods } from '@/api/commityBuy'
export default {
  data() {
    return {

    }
  },
  created() {

  },
  mounted() {
    this.getInitData()
  },
  methods: {

    getInitData() {
      statisticsGoods({}).then(res => {
        console.log(res, '=================res')
        const { data } = res.data
        const x = []
        const series = [
          {
            name: '供应商所得',
            type: 'bar',
            data: [],
            barWidth: 10,
            barGap: 0.5,
            itemStyle: {
              normal: {
                show: true,
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#5768EF'
                }, {
                  offset: 1,
                  color: '#5768EF'
                }]),
                // barBorderRadius: 50,
                borderWidth: 0
              }
            }
          },
          {
            name: '团长佣金',
            type: 'bar',
            data: [],
            barWidth: 10,
            barGap: 0.5, // 柱间距离
            itemStyle: {
              normal: {
                show: true,
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#69CBF2'
                }, {
                  offset: 1,
                  color: '#69CBF2'
                }]),
                // barBorderRadius: 50,
                borderWidth: 0
              }
            }
          },
          {
            name: '实付金额',
            type: 'bar',
            data: [],
            barWidth: 10,
            barGap: 0.5, // 柱间距离
            itemStyle: {
              normal: {
                show: true,
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#69CBF2'
                }, {
                  offset: 1,
                  color: '#69CBF2'
                }]),
                // barBorderRadius: 50,
                borderWidth: 0
              }
            }
          },
          {
            name: '平台所得',
            type: 'bar',
            data: [],
            barWidth: 10,
            barGap: 0.5, // 柱间距离
            itemStyle: {
              normal: {
                show: true,
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#69CBF2'
                }, {
                  offset: 1,
                  color: '#69CBF2'
                }]),
                // barBorderRadius: 50,
                borderWidth: 0
              }
            }
          }
        ]
        data.forEach(item => {
          x.push(item.goods_name)
          series[0].data.push(parseFloat(item.supplier_money) ? parseFloat(item.supplier_money) : 0)
          series[1].data.push(parseFloat(item.reg_money) ? parseFloat(item.reg_money) : 0)
          series[2].data.push(parseFloat(item.pay_price) ? parseFloat(item.pay_price) : 0)
          series[3].data.push(parseFloat(item.p_money) ? parseFloat(item.p_money) : 0)
        })
        const myEchart = this.$echarts.init(document.getElementById('echart1'), 'macarons')

        myEchart.setOption({
          backgroundColor: '#091C3D',
          tooltip: { // 提示框组件
            trigger: 'axis',
            formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />{a3}: {c3}',
            axisPointer: {
              type: 'shadow',
              label: {
                backgroundColor: '#6a7985'
              }
            },
            textStyle: {
              color: '#fff',
              fontStyle: 'normal',
              fontFamily: '微软雅黑',
              fontSize: 12
            }
          },
          grid: {
            left: '10%',
            right: '10%',
            bottom: '10%',
            top: '40%',
            //	padding:'0 0 10 0',
            containLabel: true
          },
          legend: {// 图例组件，颜色和名字
            right: '10%',
            top: '30%',
            itemGap: 16,
            itemWidth: 18,
            itemHeight: 10,
            data: [{
              name: '平台所得'
            },
            {
              name: '团长佣金'
            },
            {
              name: '供应商所得'
            },
            {
              name: '实付金额'
            }

            ],
            textStyle: {
              color: '#a8aab0',
              fontStyle: 'normal',
              fontFamily: '微软雅黑',
              fontSize: 12
            }
          },
          xAxis: [
            {
              type: 'category',
              //	boundaryGap: true,//坐标轴两边留白
              data: x,
              axisLabel: { // 坐标轴刻度标签的相关设置。
                //		interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
                //	margin:15,
                textStyle: {
                  color: '#078ceb',
                  fontStyle: 'normal',
                  fontFamily: '微软雅黑',
                  fontSize: 12
                },
                rotate: 50
              },
              axisTick: {// 坐标轴刻度相关设置。
                show: false
              },
              axisLine: {// 坐标轴轴线相关设置
                lineStyle: {
                  color: '#fff',
                  opacity: 0.2
                }
              },
              splitLine: { // 坐标轴在 grid 区域中的分隔线。
                show: false
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              splitNumber: 5,
              axisLabel: {
                textStyle: {
                  color: '#a8aab0',
                  fontStyle: 'normal',
                  fontFamily: '微软雅黑',
                  fontSize: 12
                }
              },
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: ['#fff'],
                  opacity: 0.06
                }
              }

            }
          ],
          series: series
        })
      })
    }

  }

}
</script>

<style>
#echart1 {
  /* margin: 30px auto; */
  width: 1200px;
  height: 80vh;
  /* background-color: red; */
}
</style>
